import {
    Meta,
    Markdown,
    Canvas,
    AnchorMdx,
    CodeOrSourceMdx,
    HeadersMdx,
} from '@storybook/addon-docs';
import * as Stories from './Breadcrumbs.stories';
import Readme from '../README.md?raw';

export const BreadcrumbsExample = () => <Canvas of={Stories.Default} sourceState="none" />;
export const BreadcrumbsEvents = () => <Canvas of={Stories.Events} sourceState="none" />;
export const BreadcrumbsLinks = () => <Canvas of={Stories.Links} sourceState="none" />;
export const BreadcrumbsRootContext = () => <Canvas of={Stories.RootContext} sourceState="none" />;
export const BreadcrumbsSeparator = () => <Canvas of={Stories.Separator} sourceState="none" />;
export const BreadcrumbsWithIcons = () => <Canvas of={Stories.WithIcons} sourceState="none" />;
export const BreadcrumbsLandmarks = () => <Canvas of={Stories.Landmarks} sourceState="none" />;
export const BreadcrumbsEndContent = () => <Canvas of={Stories.EndContent} sourceState="none" />;
export const BreadcrumbsClientNavigation = () => (
    <Canvas of={Stories.ClientNavigation} sourceState="none" />
);
export const BreadcrumbsDisabledItems = () => (
    <Canvas of={Stories.DisabledItems} sourceState="none" />
);

<Meta of={Stories} />

<Markdown
    options={{
        overrides: {
            code: CodeOrSourceMdx,
            a: AnchorMdx,
            ...HeadersMdx,
            BreadcrumbsExample,
            BreadcrumbsEvents,
            BreadcrumbsLinks,
            BreadcrumbsRootContext,
            BreadcrumbsSeparator,
            BreadcrumbsWithIcons,
            BreadcrumbsLandmarks,
            BreadcrumbsDisabledItems,
            BreadcrumbsEndContent,
            BreadcrumbsClientNavigation,
        },
    }}
>
    {Readme}
</Markdown>
